<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<script src="js/vue-2.6.12.js"></script>
<!--	因为 vueRouter 需要依赖 vue.js 所以必须先引入vue.js 再引入 vueRouter.js-->
	<script src="js/vue-router-3.4.9.js"></script>
</head>
<body>

<div id="app">
<!--<router-link to="/login">登录</router-link>-->
<!--<router-link to="/register">注册</router-link>-->
<hr>
	<router-view></router-view>
</div>


<!-- 登录的表单组件-->
<template id="login-form">
	
	<form>
		username:<input type="text" name="username" v-model="username"> <br>
		password:<input type="password" name="password" v-model="password"> <br>
		<button type="button">登录</button> <router-link to="/register"><button type="button">注册</button></router-link>
	</form>
	
</template>

<!-- 注册的表单组件-->
<template id="register-form">
	<form>
		
		username:<input type="text" v-model="username"> <br>
		password:<input type="password" v-model="password"> <br>
		password2:<input type="password" v-model="password2"> <br>
		<router-link to="/login"><button type="button">登录</button></router-link> <button type="button">注册</button>
	</form>
</template>


<script>
	
	let loginForm = {
	  
	  template:"#login-form",
	  data:function () {
	    return {
	      username:"",
	      password:""
	    }
      }
	  
	}
	
	let registerForm ={
	  template: "#register-form",
	  data:function (){
	    return {
	      username: "",
	      password:"",
	      password2:""
	    }
	  }
	}

	//创建一个路由实例 并将实例注册进 vue实例中 /也可以直接在vue实例中创建路由实例
	let myRouter = new VueRouter({
	  // 路由实例中 有routes 属性 是一个数组 数组中的每个对象是一个路由规则
      routes:[
        {name:"default",path:"/",redirect:"/login"},  //default 表示默认路由规则
        {name:"login",path: "/login",component:loginForm},  //name 属性表示规则名可以不写 path表示请求的路径  component 表示要注册 并 显示的组件
	                                                        //从这里可以看出 组件要想使用必须要先注册在使用
        {name:"register",path: "/register",component:registerForm}
      ]
    })

	
	let app = new Vue({
	  el:"#app",
	  data:{},
	  methods:{},
	  router:new VueRouter({  //直接在vue实例中创建路由实例
        routes:[
          // 路由
          {name:"default",path:"/",redirect:"/login"},
          {name:"login",path: "/login",component:loginForm},
          {name:"register",path: "/register",component:registerForm}
        ]
      })
	  
	  
	})
	
</script>

</body>
</html>